<template>
	<view class="pb-20">
		<view class="header" :style="`background-image:url('${WEBCONFIG?.headerImg}')`">
			<view class="pl-20 mt-93 flex flex-column">
				<text class="fs-28 fw-bold">快速定制我的</text>
				<text class="fs-28 fw-bold text-blue">数字人视频</text>
				<text class="fs-12">形象、声音 1:1复刻</text>
				<view class="btn-blue  gap-4 mt-30" @click="$page.open('/pages/created/works/index')">创建数字人视频<text class="iconfont icon-youjiantou"></text></view>
			</view>
		</view>

		<view class="px-12 mt-15">
			<yCategory></yCategory>
			<view class="mt-10 bg-white round-8 mt-15 p-12">
				<view class="flex flex-x-space-between mb-5">
					<text class="fs-16 fw-600">使用教程</text>
					<view class="flex flex-y-center text-999 fs-13" @click="$page.open('/pages/article/list')">查看更多
						<text class="iconfont icon-youjiantou fs-13"></text>
					</view>
				</view>
				<yArticle></yArticle>
			</view>
		</view>
		<y-popup ref="loginPopup" mode='bottom' round='12px'>
			<view class="pb-10">
				<y-login @close="loginPopup.close()"></y-login>
			</view>
		</y-popup>
	</view>
</template>

<script setup>
	import { onMounted, ref } from 'vue';
	import yCategory from './modules/y-category.vue'
	import yArticle from './modules/y-article.vue'
	import { onLoad } from "@dcloudio/uni-app"
	import { getConfig } from '@/api/system.js'
	import { useRefs, useUserStore, useWebConfigStore } from '@/stores'
	import { $page } from '@/utils';
	const { hasLogin, getUserInfo } = useUserStore()
	const { WEBCONFIG } = useRefs(useWebConfigStore())
	const loginPopup = ref()


	onMounted(() => {
		if (hasLogin()) {
			getUserInfo()
		} else {
			loginPopup?.value.open()
		}
	})
	onLoad(() => {})
</script>

<style>
	.header {
		width: 100%;
		height: 570rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.top-btn {
		padding: 0px 140rpx;
	}

	.mt-93 {
		padding-top: 186rpx;
	}
</style>